<template>
	<div class="page-content">
		<div class="page-title">请选择图案形状
		<div class="page-timer"><Timer title="请选择图案形状"></Timer></div>
		</div>
		<div style="height: 823px;">
			<div class="toptime">刷新倒计时
			<Timer seconds="10"></Timer>
			</div>
			<div style="height: 673px;display: flex;align-items: flex-start;justify-content: center;">
				<div class="img-wrapper">
					<img :src="imgcolor" alt="">
				</div>
				<div class="btn-wrapper">
					<button class="btns" v-for="(item,i) in datas" :key="i">{{item.value}}</button>
				</div>
			</div>
		</div>
		<el-dialog
		:visible.sync="dialogtimer"
		width="806px"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		:show-close="false"
		top="30vh">
		<span slot="title" class="dialog-header" >
			<!-- <Timer seconds="10" style="margin-top: 10px;"></Timer> -->
		</span>
			<div style="height: 271px;display: flex;justify-content: center;align-items: center;color: #0060FD; font-size: 28px;">
				3次超时将认定检测失败
			</div>
			<div style="height: 102px;background-color: #E7EEF4;border-radius: 0 0 20px 20px;display: flex;align-items: center;justify-content: center;border: 2px solid #AEB8C1">
				<button class="btn" style="width: 200px;height: 71px;" @click="determine">确认</button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				dialogtimer:false,
				imgcolor:'',
				datas:[
					{
						value:'羊',
					},
					{
						value:'A',
					},
					{
						value:'1269',
					},
					{
						value:'五角星',
					},
					{
						value:'圆形',
					},
					{
						value:'8',
					},
					]
			}
		},
		methods:{
			determine(){
				this.dialogtimer = false;
			},
		}
	}
</script>

<style scoped="scoped">
	.toptime{
		height: 150px;width: 100%; color: #ACB9C2;font-size: 30px;display: flex;justify-content: start;align-items: center;margin-left: 280px;
	}
	.img-wrapper {
		margin-right: 40px;
		border-radius: 20px;
		border: 1px solid #ACB9C1;
		height: 440px;width: 587px;
		display: flex;
		justify-content: center;align-items: center;
	}

	.btn-wrapper {
		margin-left: 40px;
		height: 440px;
		width: 482px;
	}
	.btns{
		height: 210px;width: 150px;border: 3px solid #1268F9;border-radius: 10px;background-color: #E7EEF4;margin: 3px 5px;color: #005FFF;font-size: 42px;
	}
	.btns.active{
		height: 210px;width: 150px;border: 3px solid #1268F9;border-radius: 10px;background-color: #005FFF;margin: 3px 5px;color: #fff;font-size: 42px;
	}
	.page-content>>>.el-dialog__header{
		width: 100%;
		margin: 0;padding: 0;
		height: 84px;background-color: #E7EEF4;
		display: flex;justify-content: center;align-items: center;
		border-radius: 20px 20px 0 0;
		font-size: 32px;color: #0060FF;font-weight: bold;
	}
	.page-content>>>.el-dialog__body{
		margin: 0;padding: 0;
	}
	.page-content>>>.el-dialog{
		border-radius: 20px;
	}
	.dialog-header{
		height: 100%;width: 100%;
	}
</style>
